<template>
  <view class="callPolice">
    <!-- 左上角图标 -->
  <u-button
        style="
          position: absolute;
          top: 30rpx;
          left: 20rpx;
          width: 80rpx;
          height: 80rpx;
          padding: 0;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.2);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          display: flex;
          justify-content: center;
          align-items: center;
        "
        @click="routerGo(-1)"
      >
        <u-icon
          name="arrow-leftward"
          color="#fff"
          style="font-size: 32rpx;"
        ></u-icon>
      </u-button>
    <view style="height: 90%;width: 100%;">
      <text style="padding: 20px 0 20px 0; text-align: center; color: #fff; display: block; font-size: 48rpx;">
        {{ t("errorListActive.dynamicAlarm") }}
      </text>
      <view style="display: flex; justify-content: center; gap: 15px;height: 5%;"> 
        <u-button
          type="warning"
          style="
            width: 30%;
            height: 100%;
            padding: 8px 20px;
            border-radius: 40rpx;  
            font-size: 14px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
          "
          @click="routerReplace('/pages/callpoliceactive/callpolice')"
        >
          {{ t("errorListActive.viewAlarmHistory") }}
        </u-button>
      </view>
      <view style="text-align: center; color: #fff; padding: 20px 0 20px 0; font-size: 30rpx; ">
        {{ t("errorListActive.currentTime") }}: {{ date }}
      </view>
      <CallPoliceList
        :data-list="allData.newiOffside"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, inject } from 'vue';
import { routerPush, routerReplace, routerGo } from "@/plugins/index.js";
import moment from "moment";
import CallPoliceList from "@/components/callpolice/CallPoliceList.vue";
import { useI18n } from 'vue-i18n'; // 假设使用 vue-i18n 进行国际化

const { t } = useI18n();
const date = ref(moment().format("YYYY-MM-DD HH:mm:ss"));
let allData = inject("allData");

let dateFom = computed(() => {
  return (dataNub) => {
    return moment(new Date(dataNub)).format("YYYY-MM-DD HH:mm:ss");
  };
});

onMounted(() => {
  setInterval(() => {
    date.value = moment().format("YYYY-MM-DD HH:mm:ss");
  }, 1000);
});
</script>

<style scoped>
.callPolice {
  margin: auto auto;
  width: 100%;
  height: 100%;
  background: rgb(45, 73, 97);
  position: relative; /* 为了让绝对定位的图标相对于此容器定位 */
}
</style>